<template>
	<view class="card card-dynamic" v-if="listData.length">
		<view class="hd fboxRow Ycenter font38 color-E8CDA7">
			<view class="flex1">我的点点</view>
			<view v-if="listData.length" class="color-6B707C font26 lh38" @click="$pageTo('/mydd?memberId='+cardId)">更多</view>
		</view>
		<view class="bd font28">
			<template v-if="listData.length">
				<view v-for="(item, index) in listData" :key="index">
					<DynamicItem :isMine="isMine" :innerData="item" @updateAttention="setFollow" @login="login" space="line" />
				</view>
				<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
			</template>
			<template v-else>
				<view class="dynamic-tips fboxRow Ycenter  color-ACB4C7">暂无</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		cardHomeDynamic
	} from '@/api/card.js';
	import DynamicItem from '@/components/circle/dynamic-item.vue';
	export default {
		components:{DynamicItem},
		props: {
			cardId: {
				type: String,
				defaul:  ''
			},
			isMine: {
				type: Boolean,
				default: false
			},
		},
		watch:{
			cardId:{
				handler(val){
					if(val){
						this.getList()
					}
				}
			}
		},
		data() {
			return {
				listData: [],
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
			}
		},
		mounted() {
			this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
			this.getList()
		},
		methods: {
			login(){
				this.$emit('login')
			},
			getList(cardId) {
				console.log(12313)
				const {current,size} = this.listConfig
				cardHomeDynamic({
					current,size, memberId: cardId || this.cardId
				}).then(res => {
					res.data.list.filter(item => {
						if (item.picture) {
							item.pictures = item.picture.split(',')
						}
					})
					if (this.listData.length) {
						this.listData = this.listData.concat(res.data.list)
					} else {
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			listLoading(res) {
				console.log('listLoading',res.data.total < res.data.size , res.data.current * res.data.size >= res.data.total)
				if (res.data.total == 0) {
					this.listConfig.loading = 'list-not'
				} else if (res.data.total < res.data.size || res.data.current * res.data.size >= res.data.total) {
					this.listConfig.loading = 'nomore'
				}else{
					this.listConfig.loading = 'loading'
				}
				this.listConfig.count = res.data.total
			},
			listMore() {
				const {
					current,
					size,
					count,
					loading
				} = this.listConfig
				console.log('listMore', current * size , count)
				if (current * size < count) {
					this.listConfig.current = current + 1
					this.getList()
				} else {
					this.listConfig.loading = 'nomore'
				}
			},
			urlType(url) {
				// const mp4Reg = /^.+(\.mp4)$/
				return /\.(mp4|avi|wmv|mpg|mpeg|mov|rm|ram|swf|flv)/.test(url)
			},
			picPreview(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			setFollow(val){
				this.listData.filter(item=>{
					item.isFollow = val
				})
				this.$emit('follow',val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding:24rpx 40rpx 56rpx;
	}

	.card .hd {
		line-height: 56rpx;
		font-weight: 700;
	}

	.card .bd {
		padding: 20rpx 0 0;
	}


	.dynamic-tips {
		height: 80rpx;
	}
	.card-dynamic{background-color: var(--viewBgColor);}
	
	.dynamic-item .item-hd .avatar {
		margin-right: 20rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		background-color: #f9f9f9;
	}

	.dynamic-item .item-hd .icon {
		width: 6rpx;
		height: 26rpx;
	}

	.dynamic-item .con {
		line-height: 44rpx;
	}

	.dynamic-item .pic-list {
		margin-right: -20rpx;
	}

	.dynamic-item .pic-list .max-pic {
		width: 630rpx;
		height: 400rpx;
		border-radius: 12rpx;
	}

	.dynamic-item .pic-list .pic {
		margin: 20rpx 20rpx 0 0;
		width: 196rpx;
		height: 196rpx;
		border-radius: 12rpx;
	}

	.dynamic-item .icon {
		margin-right: 6rpx;
		width: 34rpx;
		height: 28rpx;
	}

	.dynamicForward {
		margin-top: 20rpx;
		padding: 30rpx;
		height: 210rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 16, 61, 0.16);
	}

	.dynamicForward .pic {
		margin-right: 20rpx;
		width: 224rpx;
		height: 150rpx;
		border-radius: 6rpx;
	}

	.dynamicForward .con {
		max-height: 132rpx;
		overflow: hidden;
	}
</style>